<template>
	<view>
		<view class="m-tab">
			<view class="m-tab-item" @click="clickTabFun(item,index)" :class="{'m-tab-active':params.scene == item.id}" v-for="(item,index) in listTab" :key="index">
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index" @click="to_link('/pages/order/detail?id='+item.id)">
				<view class="m-item-top">
					<view class="m-item-top__left">
						<view class="m-item-font1 u-line-1">
							<text>{{item.hotal}}</text>
						</view>
						<view class="m-item-font2">
							<text>{{get_date('MM月DD日',item.startTime)}} 至 {{get_date('MM月DD日',item.endTime)}} {{item.night_num}}晚</text>
						</view>
						<view class="m-item-font3">
							<text>{{item.home.title}} {{item.num}}间</text>
						</view>
					</view>
					<view class="">
						<text class="m-item-top__right">{{item.price}}</text>
					</view>
				</view>
				<view class="m-item-bottom">
					<view class="m-item-bottom__left">
						<block v-if="item.status == -5">
							<text class="m-item-font4">待支付</text>
							<text class="m-item-font6">剩余</text>
							<u-count-down :timestamp="item.second || 0" :show-days="false" :show-hours="false" :font-size="22" :separator-size="22" separator-color="#DE2C38" color="#DE2C38"></u-count-down>
						</block>
						<text class="m-item-font4" v-else-if="item.status == -1">已取消</text>
						<text class="m-item-font4" v-else-if="item.status == 2">待入住</text>
						<text class="m-item-font4" v-else-if="item.status == 3">入住中</text>
						<text class="m-item-font4" v-else-if="item.status == 4">已完成</text>
					</view>
					<view class="m-item-bottom__right">
						<view class="m-item-btn" v-if="item.status == 4" @click.stop="to_link('/pages2/hotel-invoice-add/hotel-invoice-add?id='+item.id)">
							<text>申请发票</text>
						</view>
						<view class="m-item-btn">
							<text>订单详情</text> 
						</view>
						<view class="m-item-btn m-item-btn__extend" v-if="item.status == -5">
							<text>立即支付</text>
						</view>
						<view class="m-item-btn m-item-btn__cancel" v-if="item.status == 2">
							<text>取消订单</text>
						</view>
						<view class="m-item-btn m-item-btn__extend" v-if="item.status == -1 || item.status == 4" @click.stop="toHotelDetail(item.hotalId)">
							<text>再次预定</text>
						</view>
						<!-- <view class="m-item-btn m-item-btn__extend" v-if="item.status == 4" @click="to_link('/pages/order/evalForm?id='+item.id)">
							<text>评价</text>
						</view> -->
					</view>
				</view>
			</view>
			
			<view class="m-empty" v-if="list.length ==0 && loading == 'noMore'">
				<image src="/static/hotel/hotel-order-empty.png" mode=""></image>
				<view class="m-empty-text">
					<text>暂无订单</text>
				</view>
			</view>
			<uni-load-more v-else :status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {get_date,get_timestamp} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				listTab:[{id:0,name:'全部'},{id:1,name:'待支付'},{id:2,name:'待入住'},{id:3,name:'入住中'},{id:4,name:'已完成'},{id:5,name:'已取消'}],
				
				loading:'loading',
				list:[],
				params:{
					page:1,
					pagenum:10,
					scene:0
				}
			}
		},
		computed:{
			getCountComputed(){
				return (item)=>{
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24/60/60
					return count
				}
			}
		},
		onLoad(opt) {
			this.params.scene = opt.scene || 0
			uni.$on('loginSuccess',()=>{
				this.params.page = 1
				this.list = []
				this.getListFun()
			})
		},
		onShow(){
			this.params.page = 1
			this.list = []
			this.getListFun()
		},
		onReachBottom() {
			if(this.loading == 'more'){
				this.getListFun()
			}
		},
		methods: {
			get_date,
			//跳转到详情页
			toHotelDetail(id) {
				wx.navigateTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr,
				})
			},
			clickTabFun(item,index){
				this.params.scene = item.id
				this.params.page = 1
				this.list = []
				this.getListFun()
			},
			getListFun(){
				if(!this.isLogin()){
					this.loading = 'noMore'
					return false;
				}
				this.loading = 'loading'
				let params = this.params
				this.$http.getJson('hotal_orderList',params).then(res=>{
					if(res.code == 1){
						let list = res.data || []
						let len = list.length
						if(len > 0){
							this.list = this.list.concat(list)
						}
						if(len == params.pagenum){
							this.loading = 'more'
							params.page += 1
						}else{
							this.loading = 'noMore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}
.m-tab{
	position: fixed;
	display: flex;
	z-index: 99;
	width: 750rpx;
	height: 100rpx;
	background-color: #fff;
	.m-tab-item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #75706A;
	}
	.m-tab-active{
		position: relative;
		font-size: 32rpx;
		color: #34302D;
		font-weight: 600;
		&::after{
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 56rpx;
			height: 6rpx;
			background: #D3A358;
		}
	}
}

.m-list{
	padding-top: 120rpx;
	.m-item{
		background: #fff;
		padding: 0 25rpx;
		margin-bottom: 20rpx;
		.m-item-top{
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
			.m-item-top__left{
				width: 540rpx;
				.m-item-font1{
					font-size: 28rpx;
					color: #34302D;
					line-height: 40rpx;
					font-weight: 800;
				}
				.m-item-font2{
					font-size: 24rpx;
					color: #9A958F;
					line-height: 33rpx;
					margin-top: 8rpx;
				}
				.m-item-font3{
					font-size: 24rpx;
					color: #9A958F;
					line-height: 33rpx;
					margin-top: 15rpx;
				}
			}
			.m-item-top__right{
				font-size: 40rpx;
				color: #DE2C38;
				&::before{
					content:'￥';
					font-size: 24rpx;
				}
			}
		}
		.m-item-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			padding-top: 33rpx;
			padding-bottom: 33rpx;
			border-top: 1px solid #E6E3DE;
			.m-item-bottom__left{
				.m-item-font4{
					font-size: 26rpx;
					color: #DE2C38;
					font-weight: 600;
				}
				.m-item-font5{
					font-size: 26rpx;
					color: #D3A358;
					font-weight: 600;
				}
				.m-item-font6{
					font-size: 20rpx;
					color: #75706A;
					margin-left: 12rpx;
				}
				.m-item-font7{
					font-size: 20rpx;
					color: #DE2C38;
					margin-left: 5rpx;
				}
			}
			.m-item-bottom__right{
				display: flex;
				align-items: center;
				.m-item-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 136rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D3A358;
					font-size: 24rpx;
					color: #D3A358;
					margin-left: 20rpx;
				}
				.m-item-btn__extend{
					background: #D3A358;
					color: #fff;
				}
				.m-item-btn__cancel{
					border-color: #E6E3DE;
					color: #75706A;
				}
			}
		}
	}
}

.m-empty{
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	font-size: 26rpx;
	color: #ADAAA5;
	padding-top: 150rpx;
	image{
		width: 320rpx;
		height: 260rpx;
		margin-bottom: 30rpx;
	}
}
</style>
